import G6 from '@antv/g6';

let vm = null

const sendThis = (_this) => {
    vm = _this
}

export default {
    sendThis,
    myfun(container) {

        const collapseIcon = (x, y, r) => {
            return [
                ['M', x - r, y],
                ['a', r, r, 0, 1, 0, r * 2, 0],
                ['a', r, r, 0, 1, 0, -r * 2, 0],
                ['M', x - r + 4, y],
                ['L', x - r + 2 * r - 4, y],
            ];
        };
        const expandIcon = (x, y, r) => {
            return [
                ['M', x - r, y],
                ['a', r, r, 0, 1, 0, r * 2, 0],
                ['a', r, r, 0, 1, 0, -r * 2, 0],
                ['M', x - r + 4, y],
                ['L', x - r + 2 * r - 4, y],
                ['M', x - r + r, y - r + 4],
                ['L', x, y + r - 4],
            ];
        };

        G6.registerCombo('cRect', {
            drawShape: function drawShape(cfg, group) {
                const self = this;
                cfg.padding = cfg.padding || [50, 20, 20, 20];
                const style = self.getShapeStyle(cfg);
                const rect = group.addShape('rect', {
                    attrs: {
                        ...style,
                        x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2,
                        y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2,
                        width: style.width,
                        height: style.height
                    },
                    draggable: true,
                    name: 'combo-keyShape'
                });
                group.addShape('marker', {
                    attrs: {
                        ...style,
                        fill: '#fff',
                        opacity: 1,
                        x: cfg.style.width / 2 + cfg.padding[1],
                        y: (cfg.padding[2] - cfg.padding[0]) / 2,
                        r: 10,
                        symbol: collapseIcon
                    },
                    draggable: true,
                    name: 'combo-marker-shape'
                });
                return rect;
            },
            afterUpdate: function afterUpdate(cfg, combo) {
                const group = combo.get('group');
                const marker = group.find(ele => ele.get('name') === 'combo-marker-shape');
                marker.attr({
                    x: cfg.style.width / 2 + cfg.padding[1],
                    y: (cfg.padding[2] - cfg.padding[0]) / 2,
                    symbol: cfg.collapsed ? expandIcon : collapseIcon
                });
            }
        }, 'rect');

        G6.registerEdge(
            'line-arrow',
            {
                getPath(points) {
                    const startPoint = points[0];
                    const endPoint = points[1];
                    return [
                        ['M', startPoint.x, startPoint.y],
                        ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],
                        ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],
                        ['L', endPoint.x, endPoint.y],
                    ];
                },
                getShapeStyle(cfg) {
                    const startPoint = cfg.startPoint;
                    const endPoint = cfg.endPoint;
                    const controlPoints = this.getControlPoints(cfg);
                    let points = [startPoint]; // the start point
                    // the control points
                    if (controlPoints) {
                        points = points.concat(controlPoints);
                    }
                    // the end point
                    points.push(endPoint);
                    const path = this.getPath(points);
                    const style = Object.assign(
                        {},
                        G6.Global.defaultEdge.style,
                        {
                            stroke: '#BBB',
                            lineWidth: 1,
                            path,
                        },
                        cfg.style,
                    );
                    return style;
                },
            },
            'line',
        );

        const width = container.scrollWidth;
        const height = (container.scrollHeight || 500) - 20;
        const graph = new G6.Graph({
            container: 'container',
            width,
            height,
            fitCenter: true,
            groupByTypes: false,
            // layout: {
            //     // type: 'comboForce',
            //     type: 'dagre',
            // },
            defaultCombo: {
                type: 'cRect',
            },
            comboStateStyles: {
                dragenter: {
                    lineWidth: 4,
                    stroke: '#FE9797'
                }
            },
            defaultEdge: {
                type: 'line-arrow',
                style: {
                    stroke: '#F6BD16',
                    endArrow: {
                        path: 'M 0,0 L 12,6 L 9,0 L 12,-6 Z',
                        fill: '#F6BD16',
                    },
                },
            },
            defaultNode: {
                type: 'rect',
                size: [110, 40],
                style: {
                    fill: '#9EC9FF',
                    stroke: '#5B8FF9',
                    lineWidth: 1,
                },
                labelCfg: {
                    style: {
                        fill: '#fff',
                        fontSize: 14,
                    },
                },
                linkPoints: {
                    left: true,
                    right: true,
                    size: 10,
                    fill: '#fff',
                    lineWidth: 1,
                    stroke: '#1890FF',
                },
            },
            modes: {
                default: [
                    'drag-canvas',
                    'zoom-canvas',
                    'drag-combo',
                ]
            }
        })

        // collapse/expand when click the marker
        graph.on('combo:click', e => {
            if (e.target.get('name') === 'combo-marker-shape') {
                // graph.collapseExpandCombo(e.item.getModel().id);
                graph.collapseExpandCombo(e.item);
                if (graph.get('layout')) graph.layout();
                else graph.refreshPositions();
            }
        });

        graph.on('combo:dragend', e => {
            graph.getCombos().forEach(combo => {
                graph.setItemState(combo, 'dragenter', false);
            })
        });
        graph.on('node:dragend', e => {
            graph.getCombos().forEach(combo => {
                graph.setItemState(combo, 'dragenter', false);
            })
        });

        graph.on('combo:dragenter', e => {
            graph.setItemState(e.item, 'dragenter', true);
        });
        graph.on('combo:dragleave', e => {
            graph.setItemState(e.item, 'dragenter', false);
        });

        return graph
    }
}
